import { useEffect } from 'react';
import G6, { Graph } from '@antv/g6';
import React from 'react';
import { Flex, Layout, Space } from 'antd';
import routerIcon from '../assets/Icons8-Ios7-Network-Router.48.png'
import hostIcon from '../assets/Ionic-Ionicons-Desktop-outline.48.png'
import topo from '../assets/topo'

G6.registerNode('router', {
  draw(cfg, group) {
    const size = cfg.size || 48;
    const routerShape = group.addShape('image', {
      attrs: {
        x: -size / 2,
        y: -size / 2,
        width: size,
        height: size,
        img: routerIcon,
      },
      draggable: true,
    });
    const label = cfg.label || cfg.id;
    // if (cfg.label) {
      // const style = (cfg.labelCfg && cfg.labelCfg.style) || {};
      // style.text = cfg.label;
      group.addShape('text', {
        // attrs: style,
        attrs: {
          x: 0, // 居中
          y: size / 2 + 10,
          textAlign: 'center',
          textBaseline: 'middle',
          text: label,
          fill: '#666',
        },
        draggable: true,
      });
    // }
    return routerShape;
  }
}, 'circle')

G6.registerNode('host', {
  draw(cfg, group) {
    const size = cfg.size || 48;
    const routerShape = group.addShape('image', {
      attrs: {
        x: -size / 2,
        y: -size / 2,
        width: size,
        height: size,
        img: hostIcon,
      },
      draggable: true,
    });
    
    const label = cfg.label || cfg.id;
    // if (cfg.label) {
      // const style = (cfg.labelCfg && cfg.labelCfg.style) || {};
      // style.text = cfg.label;
      group.addShape('text', {
        // attrs: style,
        attrs: {
          x: 0, // 居中
          y: size / 2 + 10,
          textAlign: 'center',
          textBaseline: 'middle',
          text: label,
          fill: '#666',
        },
        draggable: true,
      });
    // }
    return routerShape;
  }
}, 'circle')